import { defineComponent, onMounted, ref } from "vue";
import PageTitle from "@/components/PageTitle";
import CardView from "@/components/CardView";
import FilterMenuSearch from "@/components/FilterMenuSearch";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import { useRequest } from "./request";
import DemonstrationSiteMap from "@/components/DemonstrationSiteMap";
import PairMap from "@/components/PairMap";

export default defineComponent({
  setup(props, {}) {
    const { rootData, getLevelData } = useRequest();
    const form = ref({});
    const mapRef = ref();
    onMounted(() => {});
    const render1 = () => {
      const data: IFilterMenuChoose[] = [
        {
          type: "area",
          key: "areaCode",
        },
        { type: "productType", key: "productTypeId", title: "种植品种" },
        // {
        //   comType: "cascade",
        //   key: "productTypeId",
        //   title: "种植类型",
        //   data: rootData.value,
        //   onChange: getLevelData,
        // },
      ];
      return (
        <FilterMenuSearch choose={data} v-model={form.value} searchKey="name" />
      );
    };
    const render2 = () => {
      return <PairMap ref={mapRef} v-model={form.value} />;
    };
    return () => (
      <PageTitle title="结队地图" childClass="!pb-[0px]">
        {render1()}
        {render2()}
      </PageTitle>
    );
  },
});
